<!DOCTYPE html>
<html class="x-admin-sm">
    <head>
        <meta charset="UTF-8">
        <title>挂接</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <link rel="stylesheet" href="../css/font.css">
        <link rel="stylesheet" href="../css/xadmin.css">
        <script type="text/javascript" src="../lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="../js/xadmin.js"></script>
        <script src="../lib/axios.min.js"></script>
        <script src="../lib/xlsx.mini.min.js"></script>
        <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
        <!--[if lt IE 9]>
            <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
            <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
        <div class="layui-upload">
            <button type="button" class="layui-btn layui-btn-normal" id="testList" style="margin-top: 24px;margin-left: 25px;">选择文件</button>
            <div class="layui-upload-list" style="width: 94%;margin: auto;">
              <table class="layui-table" id="view"></table>
            </div>
            <button type="button" class="layui-btn" id="testListAction" style="margin-left: 24px;">开始上传</button>
        </div>
        <script type="text/html" id="demo">
            上传成功：{{done}}
        </script>
        <script>
            var list = JSON.parse(localStorage.getItem("list"));
            localStorage.removeItem("list");
            var done = 0;
            layui.use(['upload', 'table'], function(){
                var upload = layui.upload
                ,table = layui.table;
                var map = new HashMap();

                table.render({
                    elem: '#view'
                    ,cols:[[{field: 'id', title: 'ID'},
                        {field: 'dh', title: '档号'},
                        {field: 'name', title: '文件名'},
                        {field: 'info', title: '大小'}
                        ]]
                    ,data: list
                })
                ,uploadListIns = upload.render({
                    elem: '#testList'
                    ,url: '/b'
                    ,method: 'post'
                    ,auto: false
                    ,accept: 'file'
                    ,multiple: true
                    ,bindAction: '#testListAction'
                    ,choose: function(obj){
                        var fils = obj.pushFile();
                         //将每次选择的文件追加到文件队列
                        obj.preview(function(index, file, result){
                            var df;
                            var a = 0;
                            for (var i in list) {
                                if (file.name.indexOf(list[i].dh) != -1){
                                    a = 1;
                                    if(list[i].name != undefined){
                                        list[i].name += file.name+" ";
                                        list[i].info += (file.size/1024).toFixed(1) + 'kb ';
                                    }else{
                                        list[i].name = file.name+" ";
                                        list[i].info = (file.size/1024).toFixed(1) + 'kb ';
                                    }
                                    map.put(file.name, list[i].id);
                                    break;
                                }
                            }
                            if(a == 0){
                                delete(fils[index])
                            }
                           
                            table.reload('view',{
                                data: list
                            });
                        });
                        this.files = fils;
                    }
                    ,done: function(res, index, upload){
                        console.log(res)
                        if(res.code == 0){ //上传成功
                            var fil = res.result;
                            var ul = {
                                id: map.get(fil.name),
                                file: fil
                            }
                            axios.post("/upl", ul).then(res=>{
                                map.remove(fil.name);
                            })
                        }else{
                            layer.msg(index+"上传失败！");
                        }
                        
                    }
                });
            })
            function HashMap(){  
                //定义长度  
                var length = 0;  
                //创建一个对象  
                var obj = new Object();  
            
                /** 
                * 判断Map是否为空 
                */  
                this.isEmpty = function(){  
                    return length == 0;  
                };  
            
                /** 
                * 判断对象中是否包含给定Key 
                */  
                this.containsKey=function(key){  
                    return (key in obj);  
                };  
            
                /** 
                * 判断对象中是否包含给定的Value 
                */  
                this.containsValue=function(value){  
                    for(var key in obj){  
                        if(obj[key] == value){  
                            return true;  
                        }  
                    }  
                    return false;  
                };  
            
                /** 
                *向map中添加数据 
                */  
                this.put=function(key,value){  
                    if(!this.containsKey(key)){  
                        length++;  
                    }  
                    obj[key] = value;  
                };  
            
                /** 
                * 根据给定的Key获得Value 
                */  
                this.get=function(key){  
                    return this.containsKey(key)?obj[key]:null;  
                };  
            
                /** 
                * 根据给定的Key删除一个值 
                */  
                this.remove=function(key){  
                    if(this.containsKey(key)&&(delete obj[key])){  
                        length--;  
                    }  
                };  
            
                /** 
                * 获得Map中的所有Value 
                */  
                this.values=function(){  
                    var _values= new Array();  
                    for(var key in obj){  
                        _values.push(obj[key]);  
                    }  
                    return _values;  
                };  
            
                /** 
                * 获得Map中的所有Key 
                */  
                this.keySet=function(){  
                    var _keys = new Array();  
                    for(var key in obj){  
                        _keys.push(key);  
                    }  
                    return _keys;  
                };  
            
                /** 
                * 获得Map的长度 
                */  
                this.size = function(){  
                    return length;  
                };  
            
                /** 
                * 清空Map 
                */  
                this.clear = function(){  
                    length = 0;  
                    obj = new Object();  
                };  
            }  
        </script>
    </body>

</html>